<template>
  <div class="filtersWrapper">
    <strong>部门:</strong>
    <el-checkbox-group v-model="checkedDepartment" class="departmentBtn" @change="filterChange">
      <el-checkbox
        v-for="item in depts"
        :key="item.id"
        :label="item.name"
      />
    </el-checkbox-group>
    <strong>考勤状态:</strong>
    <el-checkbox-group v-model="checkedStatu" class="attendanceBtn" @change="filterChange">
      <el-checkbox
        v-for="statu in AttendanceEnum.holidayType"
        :key="statu.id"
        :label="statu.id"
      >
        {{ statu.value }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
import { getDepartments } from '@/api/department'
import AttendanceEnum from '@/api/constant/attendance'
export default {
  props: {
    bigList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      checkedDepartment: [], // 被选中的部门选项
      depts: [], // 全部的部门列表
      AttendanceEnum, // 考勤状态枚举
      checkedStatu: [], // 被选中的状态
      checkStatu: [] // 选中的工作状态
    }
  },
  async created() {
    const { depts } = await getDepartments()
    this.depts = depts
    // console.log(this.depts)
  },
  methods: {
    filterChange() {
      // 部门过滤
      let res
      if (this.checkedDepartment.length === 0) {
        res = this.bigList
      } else {
        res = this.bigList.filter(item => {
          const department = item.departmentName
          return this.checkedDepartment.includes(department)
        })
      }
      // console.log(res)

      // 工作状态过滤
      res = res.map(item => {
        return {
          ...item,
          attendanceRecord: this.convertRecord(item.attendanceRecord)
        }
      })

      this.$emit('filterChange', res)
    },
    convertRecord(oldRecord) {
      const res = oldRecord.map(item => {
        return {
          ...item,
          // 如果没有选中任何值 || 如果当前记录的值在选中数组中  return 原数据  否则返回 0
          adtStatu: this.checkedStatu.length === 0 || this.checkedStatu.includes(item.adtStatu.toString()) ? item.adtStatu : 0
        }
      })
      console.log(123)
      return res
    }
  }

}
</script>

<style lang="scss" scoped>
.filtersWrapper {
  margin-top: 40px;
  .departmentBtn  {
    margin:0 30px 30px 40px;
    margin-top: 0;
  }
  .attendanceBtn{
    margin: 0 30px 30px  70px;
  }
}
</style>
